<template>
    <div>
        <Demandprogress :currentIndex="demandIndex"></Demandprogress>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
            <Row>
                <Col span="15">
                    <FormItem label="标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="标准：地区+某（单位）+发布+某产品（金融产品名称）" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="15">
                    <FormItem label="服务编号" prop="number">
                        <Input v-model="formValidate.number" :readonly="true"></Input>
                    </FormItem>
                </Col>
            </Row>
            <!-- <Row>
             <Col span="10">
                    <FormItem label="服务类别" prop="service_type">
                        <Select v-model="formValidate.service_type" placeholder="请选择服务类别" :disabled="!is_editing">
                            <Option v-for="item in type.service.children" :value="item.name">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
             </Row> -->
            <Row>
                  <Col span="10">
                    <FormItem label="状态">
                        <Button :type="status.type">{{status.message}}</Button>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="服务机构名称">
                        <Input v-model="info.enterprise_name" readonly></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="服务类别" prop="m_type">
                        <Select v-model="formValidate.m_type" placeholder="请选择服务类别"  :disabled="$route.query.detail == 1">
                            <Option v-for="item in type.usual_service.children" v-if="item.url=='#'" :value="item.name">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">       
                    <FormItem label="联系人" prop="service_master">
                        <Input v-model="formValidate.service_master" placeholder="请输入联系人" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
                <Col span="10">       
                    <FormItem label="联系电话" prop="service_tele">
                        <Input v-model="formValidate.service_tele" placeholder="请输入联系人电话" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">       
                    <FormItem label="联系地址" prop="service_address">
                    <Input v-model="formValidate.service_address" placeholder="请输入联系人地址" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
                <Col span="10">
                    <FormItem label="服务对象" prop="service_people">
                        <Input v-model="formValidate.service_people"  placeholder="请输入服务面向对象等内容" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">       
                    <FormItem label="服务部门" prop="service_department">
                        <Input v-model="formValidate.service_department" placeholder="请输入服务部门等内容" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
              
            </Row>
            <Row>
                <Col span="10">
                     <FormItem label="需提供材料" prop="needFileds">
                        <CheckboxGroup v-model="formValidate.needFileds">
                            <Checkbox v-for="item in type.file_submit_type.children" :label="item.name" :disabled="!is_editing"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="创建时间" prop="create_time">
                        <DatePicker v-model="formValidate.create_time" type="date" format="yyyy年MM月dd日" style="width: 200px" :readonly="true"></DatePicker>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="10">
                    <FormItem label="终止时间" prop="finish_time">
                        <DatePicker :options="options3" v-model="formValidate.finish_time" type="date" format="yyyy年MM月dd日" placeholder="请输入服务的终止时间" style="width: 200px" :readonly="!is_editing"></DatePicker>
                        <!-- <Input v-model="formValidate.finish_time"  placeholder="请输入服务的终止时间" :readonly="!is_editing"></Input> -->
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="20">
                    <FormItem label="服务内容" prop="service_content">
                        <Input v-model="formValidate.service_content" type="textarea" :autosize="{minRows: 10}" placeholder="请输入服务主要用途等内容" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
            </Row>
             <Row>
                <Col span="24">
                    <FormItem label="服务流程" prop="service_process">
                        <Card>
                            <StepsEditor source-type="service" :source="formValidate" :mode="is_editing?'edit':'preview_default'"></StepsEditor>
                        </Card>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="20">       
                    <FormItem label="服务申报条件" prop="requirement">
                        <Input v-model="formValidate.requirement" type="textarea" :autosize="{minRows: 3,maxRows: 10}" placeholder="请输入服务申报条件等内容" :readonly="!is_editing"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="20">       
                    <FormItem label="服务特色" prop="service_feature">
                        <Input v-model="formValidate.service_feature" type="textarea" :autosize="{minRows: 3,maxRows: 10}" placeholder="请输入服务特色等内容" :readonly="!is_editing"></Input>
                    </FormItem> 
                </Col>
            </Row>
            <Row>
                <Col span="20">       
                    <FormItem label="备注" >
                        <Input v-model="formValidate.Remark" type="textarea" :autosize="{minRows: 3,maxRows: 10}" placeholder="请输入服务备注等内容" :readonly="!is_editing"></Input>
                    </FormItem> 
                </Col>
            </Row>
            <Row>
                <Col v-if="is_editing">
                    <FormItem label="附件" prop="appendix">
                        <UploadedList  v-model="formValidate.appendix" :format="['doc','docx','pdf']"></UploadedList>
                    </FormItem>
                </Col>
                <Col v-if="!is_editing">
                    <FormItem label="附件">
                        <a v-for="item in appendixList" :href="item.appendixUrl">{{item.appendixName}}<br></a>
                    </FormItem>
                </Col>
            </Row>
           <Row  >
                <Col span="8">
                    <FormItem>
                        <Button type="primary" v-if="is_editing && this.info.status === 2"  @click="handleSubmit('formValidate')" :loading="waiting_button==1" :disabled="waiting_button!=1&&waiting_button!=0">发布服务</Button>
                        <Button type="ghost" v-if="is_editing"  @click="handleDraft('formValidate')" style="margin-left: 8px" :loading="waiting_button==2" :disabled="waiting_button!=2&&waiting_button!=0">存为草稿</Button>
                        <Button type="primary" v-if="!is_editing && recyclebtn"   @click="handleRecycle('formValidate')" style="margin-left: 8px" :loading="waiting_button==2" :disabled="waiting_button!=1&&waiting_button!=0">回收服务</Button>
                        <Button type="primary" v-if="!is_editing"   @click="handleReturn()" style="margin-left: 8px" >返回</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
    import Service from "@/common/model/Service";
    import UploadedList from "@/common/components/UploadedList";
    import StepsEditor from "@/common/components/StepsEditor";
    import Demandprogress from '../main-components/progress';
    
    export default {
        data () {
             const validate = (rule, value, callback)=>{
                if(this.formValidate.service_process == ''){
                    callback(new Error("请填写流程！"));
                }else{
                    callback();
                }
            };
            return {
                options3: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                modal1: false,
                is_editing: false,
                recyclebtn: false,
                fileds:["商业/项目计划书","公司证件","相关财务资料","其它资料"],
                formValidate: new Service(),
                demandIndex: 0,
                // member:'',
                ruleValidate: {
                    title:[
                        {required:true,message:'服务标题不能为空',trigger:'blur'}
                    ],
                    m_type:[
                        {required:true, message:'所属平台不能为空', trigger: 'change'}
                    ],
                    service_type:[
                        {required:true,message:'服务种类不能为空',trigger:'change'}
                    ],
                    service_content:[
                        {required:true,message:'服务内容不能为空',trigger:'blur'}
                    ],
                    service_people:[
                        {required:true,message:'服务对象不能为空',trigger:'blur'}
                    ],
                    requirement:[
                        {required:true,message:'服务申报条件不能为空',trigger:'blur'}
                    ],
                    service_process:[
                         {required:true,validator:validate,trigger:'blur'}
                    ],
                    service_master:[
                        {required:true,message:'联系人不能为空',trigger:'blur'}
                    ],
                    service_tele:[
                        {required:true,message:'联系电话不能为空',trigger:'blur'}
                    ],
                    // finish_time:[
                    //     {required:true,message:'终止时间不能为空',trigger:'blur'}
                    // ],
                    // needFileds:[
                    //      {required:true,type:'array',message:'需提供上材料要进行选择',trigger:'change'}
                    // ]
                },
                waiting_button: 0,
                status:{
                    type:'primary',
                    message:'草稿箱'
                },
                appendixList:[]
            }
        },
        components: {
             UploadedList,StepsEditor,Demandprogress
        },
        methods: {
            ok(){},
            cancel(){},
            addProcess(){
                this.modal1 = true;
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    this.waiting_button = 1;
                    if (valid) {
                       // formValidate.appendix = this.defaultFileList;
                        if(this.formValidate.id) {
                            if(this.formValidate.status != 0 && !confirm("提交信息后管理员将进行审核，不可以进行修改，确定要进行提交吗？")) {this.waiting_button = 0; return;}
                             else{
                                this.api.post("service/post", this.formValidate.serialize(), res => {
                                this.formValidate.status = res.value;
                                if(this.formValidate.status == 1){
                                    this.$CustomMessage.success('提交成功，等待审核通过!');
                                }else{
                                    this.$CustomMessage.success('审核成功，已发布!');
                                }
                                this.waiting_button = 0;
                                this.$router.push({
                                    name:'posted_service_projects'
                                    });
                                });
                            }
                        }else {
                             if(!confirm("提交信息后管理员将进行审核，不可以进行修改，确定要进行提交吗？"))  return;
                            this.api.post("service/post", this.formValidate.serialize(), res => {
                                // this.formValidate.id = res.id;
                                this.formValidate.status = res.value;
                                if(this.formValidate.status == 1){
                                    this.$CustomMessage.success('提交成功，等待审核通过!');
                                }else{
                                    this.$CustomMessage.success('审核成功，已发布!');
                                }
                                this.waiting_button = 0;
                                this.$router.push({
                                    name:'posted_service_projects'
                                });
                            });
                        }
                    } else {
                        this.$CustomMessage.error('表单信息填写有误，请仔细检查!');
                        this.waiting_button = 0;
                    }
                })
            },
            handleDraft (name) {
                this.waiting_button = 2;
                if(this.formValidate.title && !this.formValidate.id){
                        this.api.post("service/draft", this.formValidate.serialize(), res => {
                        this.formValidate.id = res.id;
                        this.formValidate.status = 0;
                        this.$CustomMessage.success('已存为草稿!');
                        this.waiting_button = 0;
                        this.$router.push({
                            name:'posted_service_projects'
                        })
                    });
                }else if(this.formValidate.id){
                      this.api.post("service/re_draft", this.formValidate.serialize(), res => {
                        this.formValidate.id = res.id;
                        this.formValidate.status = 0;
                        this.$CustomMessage.success('已存为草稿!');
                        this.waiting_button = 0;
                        this.$router.push({
                            name:'posted_service_projects'
                        })
                    });
                }else{
                     this.$CustomMessage.error('请填入该项目名称!');
                }
            },
            handleRecycle(name){
                        if(this.formValidate.id) {
                        if(!confirm("确定将已发布的项目回收吗，回收后不可恢复？")){this.waiting_button = 0; return;} 
                        else if(this.formValidate.status == 1) {
                            this.$CustomMessage.error('该项目正在审核，不能回收!');
                            this.waiting_button = 0;
                            }
                        else if(this.formValidate.status == 4){
                            this.$CustomMessage.error('该项目已回收，不能重复回收!');
                            this.waiting_button = 0;
                        }
                        else{
                            this.api.post("service/recycle", this.formValidate.serialize(), res => {
                            this.formValidate.status = 4;
                            this.$CustomMessage.success('回收成功!');
                            this.waiting_button = 0;
                            this.$router.push({
                                        name:'posted_service_projects'
                            })
                        });
                    }
                }
            },
            formatStatus(){
                var status = { type: "", message: "" };
                if(this.formValidate.status== 0){
                        status.type = "primary"
                        this.demandIndex = 0;
                        status.message = "草稿箱";
                    }else if(this.formValidate.status== 1){
                        status.type = "info"
                         this.demandIndex = 1;
                        status.message = "审核中";
                    }else if(this.formValidate.status== 2){
                        status.type = "success"
                        this.demandIndex = 2;
                        status.message = "已发布"
                    }else if(this.formValidate.status==3){
                        status.type = "error"
                        this.demandIndex = 0;
                        status.message = "审核未通过"
                    }else if(this.formValidate.status==4)
                    {
                        status.type = "warning"
                        this.demandIndex = 3;
                        status.message = "已回收"
                    }
                return status;
            },
            handleReturn(){
                this.$router.go(-1);
            }
        },
        computed:{
            info:function(){
                return this.$store.state.user.info;
            },
            type:function(){
                return this.$store.state.app.dicTree;
            }
        },
        created() {
             this.process("user_info", ()=> {
                if(this.info.status === 2 || this.$route.query.id){
                    if(!this.$route.query.id) return;
                    this.api.post("service/get", { id: this.$route.query.id }, res => {
                        this.formValidate = Service.parse(res.data); //detail:0 代表修改 detail：1 代表详情
                        console.log(this.formValidate.status);
                        this.is_editing = this.$route.query.detail==0;
                        //this.is_editing = this.$route.query.detail==0&&(this.formValidate.status==0||this.formValidate.status==3);
                        this.status = this.formatStatus();
                        for(var i = 0; i < this.formValidate.appendix.length; i++){
                            var appendixUrl = this.formValidate.appendix[i].url;
                            var appendixName = this.formValidate.appendix[i].name;
                            this.appendixList.push({'appendixUrl': appendixUrl,'appendixName': appendixName});
                        }
                        if(this.formValidate.status != 4){
                            this.recyclebtn = true;  
                        }
                    });
                }else {
                    var content = [
                        "您的个人信息还未完善，不能发布供需信息，请完善后提交审核",
                        "您的个人信息正在审核，不能发布供需信息,请耐心等待",
                        "",
                        "您的个人信息审核未通过，不能发布供需信息，请编辑个人信息后再次提交"
                    ];
                    this.$Modal.warning({
                        content: content[res.data.status], duration: 30, closable: true, onOk: () => {
                            this.$router.push({ name: 'account_safe' });
                        }
                    });
                }
             });      
        }
    }
</script>
<style scoped>
    .ivu-row{
        width: 80%;
        margin: 0 auto;
    }
</style>
